import React, { useState, useEffect } from 'react';
import { Tooltip } from 'antd';
import cn from 'classnames';
import WARNING_TYPES from '@/pages/Recruitment/Interview/utils/WARNING_TYPES';
import RECAnimation from '../RECAnimation';
import style from './style.less';

/**
 *
 * list 所有面试官列表
 * onlineList 在线面试官列表，内含对应面试官userCode
 */
const InterviewerList = ({
    warningType,
    mixedRecordState,
    userCode,
    recHOSTuserCode,
    onlineList = [],
    list = [],
    isExtended,
    showExtendBtn
}) => {
    const [localList, setLocalList] = useState(list);
    useEffect(() => {
        // 本人在列表中排首位
        let index = -1;
        const tempList = list.slice(0);
        for (; index < list.length; index += 1) {
            const item = list[index];
            if (item?.employeeCode === userCode) {
                break;
            }
        }
        if (index < list.length) {
            // 做下容错，怕了
            const tempObj = tempList.splice(index, 1)[0];
            tempList.unshift(tempObj);
            // 按照拼音字母排列
            tempList.sort((a, b) => a.employeeName.localeCompare(b.employeeName, 'zh'));
            setLocalList(tempList);
        }
    }, [list, userCode]);

    /**
     * 获取后缀
     */
    const getPostfix = item => {
        if (item.employeeCode === userCode) {
            // return '（我）';
            return '';
        }
        if (!onlineList.includes(item.employeeCode)) {
            // return '（不在线）';
            return '';
        }
        return '';
    };

    const renderState = employeeCode => {
        // 非主录音无状态显示
        if (employeeCode !== recHOSTuserCode) {
            return null;
        }
        if (warningType === WARNING_TYPES.WARNING) {
            return (
                <>
                    <div className={style.aniWrapper}>
                        <i className={cn(style.scaleIcon, style.redIcon, 'icon iconfont icona-Sounderror')}></i>
                    </div>
                    <span className={style.warningText}>检测不到音浪</span>
                </>
            );
        }
        if (mixedRecordState === 1) {
            return (
                <>
                    <div className={style.aniWrapper}>
                        <RECAnimation slim />
                    </div>
                    <span className={style.warningText}>正在录音</span>
                </>
            );
        }
        if (mixedRecordState === 2) {
            return (
                <>
                    <div className={style.aniWrapper}>
                        <RECAnimation play={false} slim />
                    </div>
                    <span className={style.warningText}>暂停录音</span>
                </>
            );
        }
        return null;
    };

    return (
        <div className={cn(style.InterviewerList, isExtended ? '' : style.hide, showExtendBtn ? '' : style.hideBorder)}>
            <div className={style.countBox}>
                面试官（{onlineList.length}/{list.length}）
            </div>
            <div className={style.scrollBox}>
                {localList.map(item => (
                    <div
                        // 在线面试官靠前排列
                        style={{
                            order: onlineList.includes(item.employeeCode)
                                ? onlineList.indexOf(item.employeeCode)
                                : list.length
                        }}
                        className={cn(style.personBox, onlineList.includes(item.employeeCode) ? '' : style.notOnline)}
                    >
                        <Tooltip key={item.employeeCode} placement="topLeft" title={item.dutyName}>
                            <div className={cn(style.personIner)}>
                                <div
                                    style={{ backgroundImage: `url(${item.employeeAvatar})` }}
                                    className={style.head}
                                ></div>
                                <div className={style.name}>
                                    <div className={style.textOverflow}>{item.employeeName + getPostfix(item)}</div>
                                    <div className={style.secondLineWrapper}>{renderState(item.employeeCode)}</div>
                                </div>
                            </div>
                        </Tooltip>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default React.memo(InterviewerList);
